<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易魂斗罗</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #222;
        }
        #game-container {
            position: relative;
            width: 800px;
            height: 400px;
            margin: 20px auto;
            background-color: #000;
            overflow: hidden;
        }
        #game-canvas {
            background-color: #000;
        }
        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 20px;
        }
        #lives {
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 20px;
        }
        
        .game-btn {
            position: absolute;
            bottom: 20px;
            right: 20px;
            padding: 15px 30px;
            font-size: 18px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s;
        }
        
        .game-btn:active {
            transform: translateY(2px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <canvas id="game-canvas" width="800" height="400"></canvas>
        <div id="score">分数: 0</div>
        <div id="lives">生命: 3</div>
        <button id="shoot-btn" class="game-btn">射击</button>
    </div>

    <script>
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const livesElement = document.getElementById('lives');
        const shootBtn = document.getElementById('shoot-btn');

            // 游戏状态
            let score = 0;
            let lives = 3;
            let gameRunning = true;
            let lastShotTime = 0;
            let enemySpawnRate = 60; // 初始敌人生成频率
        
        // 玩家角色
        const player = {
            x: 100,
            y: 300,
            width: 40,
            height: 60,
            speed: 5,
            color: '#00F',
            isShooting: false,
            direction: 'right'
        };

        // 子弹数组
        let bullets = [];
        const bulletSpeed = 10;
        const bulletSize = 5;

        // 敌人数组
        let enemies = [];
        let enemySpawnTimer = 0;

        // 键盘状态
        const keys = {
            ArrowUp: false,
            ArrowDown: false,
            ArrowLeft: false,
            ArrowRight: false,
            Space: false
        };

        // 事件监听
        document.addEventListener('keydown', (e) => {
            if (e.code in keys) {
                keys[e.code] = true;
                if (e.code === 'Space') {
                    player.isShooting = true;
                }
            }
        });

        document.addEventListener('keyup', (e) => {
            if (e.code in keys) {
                keys[e.code] = false;
                if (e.code === 'Space') {
                    player.isShooting = false;
                }
            }
        });

        // 触摸按钮事件
        shootBtn.addEventListener('touchstart', (e) => {
            e.preventDefault();
            player.isShooting = true;
        });

        shootBtn.addEventListener('touchend', (e) => {
            e.preventDefault();
            player.isShooting = false;
        });

        shootBtn.addEventListener('mousedown', () => {
            player.isShooting = true;
        });

        shootBtn.addEventListener('mouseup', () => {
            player.isShooting = false;
        });

        shootBtn.addEventListener('mouseleave', () => {
            player.isShooting = false;
        });

        // 游戏主循环
        function gameLoop() {
            if (!gameRunning) return;
            
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 更新游戏状态
            updatePlayer();
            updateBullets();
            updateEnemies();
            spawnEnemies();
            checkCollisions();
            
            // 绘制游戏元素
            drawPlayer();
            drawBullets();
            drawEnemies();
            
            requestAnimationFrame(gameLoop);
        }

        // 更新玩家位置
        function updatePlayer() {
            if (keys.ArrowUp && player.y > 0) {
                player.y -= player.speed;
            }
            if (keys.ArrowDown && player.y < canvas.height - player.height) {
                player.y += player.speed;
            }
            if (keys.ArrowLeft && player.x > 0) {
                player.x -= player.speed;
                player.direction = 'left';
            }
            if (keys.ArrowRight && player.x < canvas.width - player.width) {
                player.x += player.speed;
                player.direction = 'right';
            }
            
            // 射击
            const currentTime = Date.now();
            if (player.isShooting && currentTime - lastShotTime >= 1000) {
                shoot();
                lastShotTime = currentTime;
            }
        }

        // 射击函数
        function shoot() {
            bullets.push({
                x: player.direction === 'right' ? player.x + player.width : player.x,
                y: player.y + player.height / 2,
                direction: player.direction
            });
        }

        // 更新子弹位置
        function updateBullets() {
            for (let i = bullets.length - 1; i >= 0; i--) {
                const bullet = bullets[i];
                if (bullet.direction === 'right') {
                    bullet.x += bulletSpeed;
                } else {
                    bullet.x -= bulletSpeed;
                }
                
                // 移除超出屏幕的子弹
                if (bullet.x < 0 || bullet.x > canvas.width) {
                    bullets.splice(i, 1);
                }
            }
        }

        // 生成敌人
        function spawnEnemies() {
            enemySpawnTimer++;
            
            // 每1000分敌人数量翻倍
            const difficultyLevel = Math.floor(score / 1000);
            const currentSpawnRate = Math.max(10, enemySpawnRate / Math.pow(2, difficultyLevel));
            
            if (enemySpawnTimer % currentSpawnRate === 0) {
                const enemyType = Math.random();
                let color, health;
                
                if (enemyType < 0.01) { // 1% 深红色敌人
                    color = '#C00';
                    health = 3;
                } else if (enemyType < 0.1) { // 10% 淡红色敌人
                    color = '#F66';
                    health = 2;
                } else { // 普通敌人
                    color = '#FFF';
                    health = 1;
                }
                
                enemies.push({
                    x: canvas.width,
                    y: Math.random() * (canvas.height - 40),
                    width: 40,
                    height: 40,
                    speed: 2 + Math.random() * 2,
                    color: color,
                    maxHealth: health,
                    health: health
                });
            }
        }

        // 更新敌人位置
        function updateEnemies() {
            for (let i = enemies.length - 1; i >= 0; i--) {
                const enemy = enemies[i];
                enemy.x -= enemy.speed;
                
                // 移除超出屏幕的敌人
                if (enemy.x < -enemy.width) {
                    enemies.splice(i, 1);
                }
            }
        }

        // 碰撞检测
        function checkCollisions() {
            // 子弹与敌人碰撞
            for (let i = bullets.length - 1; i >= 0; i--) {
                const bullet = bullets[i];
                for (let j = enemies.length - 1; j >= 0; j--) {
                    const enemy = enemies[j];
                    if (
                        bullet.x > enemy.x &&
                        bullet.x < enemy.x + enemy.width &&
                        bullet.y > enemy.y &&
                        bullet.y < enemy.y + enemy.height
                    ) {
                        // 击中敌人
                        bullets.splice(i, 1);
                        enemy.health--;
                        
                        if (enemy.health <= 0) {
                            enemies.splice(j, 1);
                            score += 100;
                            scoreElement.textContent = `分数: ${score}`;
                        }
                        break;
                    }
                }
            }
            
            // 玩家与敌人碰撞
            for (let i = enemies.length - 1; i >= 0; i--) {
                const enemy = enemies[i];
                if (
                    player.x < enemy.x + enemy.width &&
                    player.x + player.width > enemy.x &&
                    player.y < enemy.y + enemy.height &&
                    player.y + player.height > enemy.y
                ) {
                    // 玩家被击中
                    enemies.splice(i, 1);
                    lives--;
                    livesElement.textContent = `生命: ${lives}`;
                    
                    if (lives <= 0) {
                        gameOver();
                    }
                }
            }
        }

        // 游戏结束
        function gameOver() {
            gameRunning = false;
            ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#FFF';
            ctx.font = '48px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('游戏结束', canvas.width / 2, canvas.height / 2 - 40);
            ctx.font = '24px Arial';
            ctx.fillText(`最终分数: ${score}`, canvas.width / 2, canvas.height / 2);
            
            // 绘制重新开始按钮
            const btnWidth = 200;
            const btnHeight = 50;
            const btnX = canvas.width / 2 - btnWidth / 2;
            const btnY = canvas.height / 2 + 40;
            
            ctx.fillStyle = '#4CAF50';
            ctx.fillRect(btnX, btnY, btnWidth, btnHeight);
            ctx.fillStyle = '#FFF';
            ctx.font = '24px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('重新开始', canvas.width / 2, btnY + btnHeight / 2 + 8);
            
            // 添加点击事件
            canvas.onclick = function(e) {
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                if (x >= btnX && x <= btnX + btnWidth && 
                    y >= btnY && y <= btnY + btnHeight) {
                    resetGame();
                }
            };
        }
        
        // 重置游戏
        function resetGame() {
            score = 0;
            lives = 3;
            bullets = [];
            enemies = [];
            enemySpawnTimer = 0;
            lastShotTime = 0;
            gameRunning = true;
            canvas.onclick = null;
            
            // 重置玩家位置
            player.x = 100;
            player.y = 300;
            player.direction = 'right';
            player.isShooting = false;
            
            // 重置UI
            scoreElement.textContent = `分数: 0`;
            livesElement.textContent = `生命: 3`;
            
            // 重新开始游戏循环
            gameLoop();
        }

        // 绘制玩家
        function drawPlayer() {
            ctx.fillStyle = player.color;
            ctx.fillRect(player.x, player.y, player.width, player.height);
            
            // 绘制枪
            ctx.fillStyle = '#888';
            if (player.direction === 'right') {
                ctx.fillRect(player.x + player.width, player.y + player.height / 2 - 2, 20, 4);
            } else {
                ctx.fillRect(player.x - 20, player.y + player.height / 2 - 2, 20, 4);
            }
        }

        // 绘制子弹
        function drawBullets() {
            ctx.fillStyle = '#FF0';
            bullets.forEach(bullet => {
                ctx.beginPath();
                ctx.arc(bullet.x, bullet.y, bulletSize, 0, Math.PI * 2);
                ctx.fill();
            });
        }

        // 绘制敌人
        function drawEnemies() {
            enemies.forEach(enemy => {
                // 绘制敌人主体
                ctx.fillStyle = enemy.color;
                ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
                
                // 绘制血条（特殊敌人）
                if (enemy.maxHealth > 1) {
                    const healthBarWidth = enemy.width;
                    const healthBarHeight = 5;
                    const healthPercentage = enemy.health / enemy.maxHealth;
                    
                    // 背景血条
                    ctx.fillStyle = 'rgba(0,0,0,0.5)';
                    ctx.fillRect(enemy.x, enemy.y - 8, healthBarWidth, healthBarHeight);
                    
                    // 当前血量
                    ctx.fillStyle = '#0F0';
                    ctx.fillRect(enemy.x, enemy.y - 8, healthBarWidth * healthPercentage, healthBarHeight);
                }
            });
        }

        // 开始游戏
        gameLoop();
    </script>
</body>
</html>
